<script>
export default {
  name: "index",
  methods:{
    logout(){  // 退出登录  跳转路由
       this.$router.push("/login")
    }
  }
}
</script>

<template>
   <div id="container">
     <h1>
       <span>学生信息管理系统后台</span>
       <div id="logout">
         <el-button type="primary" size="small" plain @click="logout">安全退出</el-button>
       </div>
     </h1>
     <nav>
       <router-link to="/home/user">用户管理</router-link> |
       <router-link to="/home/student">学生管理</router-link> |
       <router-link to="/home/course">课程管理</router-link>
     </nav>

     <hr>
    <!--     二级路由出口-->
     <router-view></router-view>
   </div>
</template>

<style scoped>
h1{
  background-color: #42b983;
}
nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}

#logout{
  display: inline-block;
  padding-right: 20px;
  float: right;
}
</style>

<!--
  网页三剑客    html  css  javascript
-->